<!--
 * @Author: fanzejie
 * @Description: 请填写简介
-->
<template>
  <div>
    <div class="checkbox">
      <a-checkbox :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>

      <a-checkbox-group
        v-model="checkedList"
        :options="plainOptions"
        @change="onChange"
      />
    </div>
    <hr />

    <div>
      <h2 v-text="checkedList"></h2>
    </div>
  </div>
</template>

<script>
//import
export default {
  name: "checkbox",
  components: {},
  data() {
    return {
      plainOptions: [
        //通讯类型，这里选中了什么，结果展示时就有什么展示
        { label: "安卓TLS", value: "atls" },
        { label: "VPDN", value: "vpdn" },
        { label: "传统TLS", value: "ttls" },
      ],
      checkedList: [],
      checkAll: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    onChange(checkedList) {
      this.checkAll = checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e) {
      if (e.target.checked) {
        this.plainOptions.forEach((item) => {
          if (!this.checkedList.includes(item.value)) {
            //不然会重
            this.checkedList.push(item.value);
          }
        });
      } else {
        this.checkedList = [];
      }
      this.checkAll = !this.checkAll;
    },
  },
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped></style>
